<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>萌包</title>

  <link rel="stylesheet" href="./css/reset.css?v=1581236853242" />
  <link rel="stylesheet" href="./css/flex.css?v=1581236853242" />
  <link rel="stylesheet" href="./css/dialog.css?v=1581236853242" />
  <link rel="stylesheet" href="./css/meng.css?v=1581236853242" />
</head>

<body>
  <div class="mask"></div>

  <div class="meng-main">
    <div class="header"><a href="javascript:;" class="back"></a>萌包</div>
    <div class="list-title">
      <div class="list-con">
        <div class="title-item on" data-list="normal">萌包列表</div>
        <div class="title-item " data-list="my">我的萌包</div>
        <div class="title-item" data-list="cmeng">过期萌包</div>
      </div>
    </div>
    <section class="meng-con">
      <ul class="meng-list normal-list">
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b1.png" alt="" />
              <div class="txt">
                <p class="title">1级萌包</p>
                <p class="num">活跃度：1</p>
                <p class="need">所需YDM：10</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：11.4</div>
              <div class="time">使用期限：30天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用8个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b2.png" alt="" />
              <div class="txt">
                <p class="title">2级萌包</p>
                <p class="num">活跃度：1</p>
                <p class="need">所需YDM：100</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：120</div>
              <div class="time">使用期限：30天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用4个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b3.png" alt="" />
              <div class="txt">
                <p class="title">3级萌包</p>
                <p class="num">活跃度：50</p>
                <p class="need">所需YDM：500</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：615</div>
              <div class="time">使用期限：30天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用3个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b4.png" alt="" />
              <div class="txt">
                <p class="title">4级萌包</p>
                <p class="num">活跃度：100</p>
                <p class="need">所需YDM：1000</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：1260</div>
              <div class="time">使用期限：30天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用2个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b5.png" alt="" />
              <div class="txt">
                <p class="title">5级萌包</p>
                <p class="num">活跃度：500</p>
                <p class="need">所需YDM：5000</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：6360</div>
              <div class="time">使用期限：32天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用2个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b6.png" alt="" />
              <div class="txt">
                <p class="title">6级萌包</p>
                <p class="num">活跃度：1000</p>
                <p class="need">所需YDM：10000</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：13160</div>
              <div class="time">使用期限：35天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用1个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
      </ul>
      <ul class="meng-list cmeng-list">
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/cb1.png" alt="" />
              <div class="txt">
                <p class="title">1级萌包</p>
                <p class="num">活跃度：1</p>
                <p class="need">所需YDM：10</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：11.4</div>
              <div class="time">使用期限：已过期</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用8个萌包</div>
            <div class="bottom-item-right">再次兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/cb2.png" alt="" />
              <div class="txt">
                <p class="title">2级萌包</p>
                <p class="num">活跃度：1</p>
                <p class="need">所需YDM：100</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：120</div>
              <div class="time">使用期限：已过期</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用4个萌包</div>
            <div class="bottom-item-right">再次兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/cb3.png" alt="" />
              <div class="txt">
                <p class="title">3级萌包</p>
                <p class="num">活跃度：50</p>
                <p class="need">所需YDM：500</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：615</div>
              <div class="time">使用期限：已过期</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用3个萌包</div>
            <div class="bottom-item-right">再次兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/cb4.png" alt="" />
              <div class="txt">
                <p class="title">4级萌包</p>
                <p class="num">活跃度：100</p>
                <p class="need">所需YDM：1000</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：1260</div>
              <div class="time">使用期限：已过期</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用2个萌包</div>
            <div class="bottom-item-right">再次兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/cb5.png" alt="" />
              <div class="txt">
                <p class="title">5级萌包</p>
                <p class="num">活跃度：500</p>
                <p class="need">所需YDM：5000</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：6360</div>
              <div class="time">使用期限：已过期</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用2个萌包</div>
            <div class="bottom-item-right">再次兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/cb6.png" alt="" />
              <div class="txt">
                <p class="title">6级萌包</p>
                <p class="num">活跃度：1000</p>
                <p class="need">所需YDM：10000</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：13160</div>
              <div class="time">使用期限：已过期</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用1个萌包</div>
            <div class="bottom-item-right">再次兑换</div>
          </div>
        </li>
      </ul>
      <ul class="meng-list my-list">
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b1.png" alt="" />
              <div class="txt">
                <p class="title">1级萌包</p>
                <p class="num">活跃度：1</p>
                <p class="need">所需YDM：10</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：11.4</div>
              <div class="time">使用期限：30天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用8个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
        <li class="meng-item">
          <div class="item-top fxc-between">
            <div class="top-item-left fx-center">
              <img src="./imgs/meng/b2.png" alt="" />
              <div class="txt">
                <p class="title">2级萌包</p>
                <p class="num">活跃度：1</p>
                <p class="need">所需YDM：100</p>
              </div>
            </div>
            <div class="top-item-right">
              <div class="ymd">奖励YDM：120</div>
              <div class="time">使用期限：30天</div>
            </div>
          </div>
          <div class="item-bottom fxc-between ">
            <div class="bottom-item-left">最多同时使用4个萌包</div>
            <div class="bottom-item-right">兑换</div>
          </div>
        </li>
      </ul>
    </section>
  </div>

  <div class="steps-dialog">
    <a href="javascript:;" class="close"></a>
    <div class="steps-header fx">
      <img src="./imgs/meng/b1.png" alt="" class="page" />
      <div class="des fxv-start flex">
        <div class="zhuan-txt fx-center">
          <i class="zhuan-icon"></i>
          <span class="num">10</span>
        </div>
        <p class="active">活跃度：1</p>
        <p class="time">使用期限： 30天</p>
      </div>
    </div>
    <div class="steps-con fxc-between">
      <div class="txt">购买数量</div>
      <div class="steps-control">
        <a class="jian" href="javascript:;">&nbsp;&nbsp;</a>
        <input type="number" value="1" />
        <a class="jia" href="javascript:;">&nbsp;&nbsp;</a>
      </div>
    </div>
    <a href="javascript:;" class="sure-button">确定</a>
  </div>

  <div class="dialog-wrapper meng-dialog">
    <img class="bag" src="./imgs/meng/b1.png" alt="" />
    <div class="text">
      获得<span class="line">
        一级萌包
      </span>
    </div>
    <div class="ti">提升活跃度1</div>
    <a href="javascript:;" class="sure-button"></a>
    <a href="javascript:;" class="close"></a>
  </div>

  <div class="dialog-wrapper pay-dialog">
    <a href="javascript:;" class="pay-close"></a>
    <div class="pay-tip">请输入支付密码</div>
    <div class="pay-money fx-center">
      <img src="./imgs/meng/zhuan.png" alt="">
      <span>10</span>
    </div>
    <div class="input-list fx">
      <input class="flex" type="password" maxlength="1">
      <input class="flex" type="password" maxlength="1">
      <input class="flex" type="password" maxlength="1">
      <input class="flex" type="password" maxlength="1">
      <input class="flex" type="password" maxlength="1">
      <input class="flex" type="password" maxlength="1">
    </div>
  </div>

  <script src="./js/zepto.js?v=1581236853242"></script>
  <script src="./js/common.js?v=1581236853242"></script>
  <script src="./js/dialog.js?v=1581236853242"></script>
  <script src="./js/meng.js?v=1581236853242"></script>
</body>

</html>